<style lang="less">
.register-form {
  margin: 0 auto;
  width: 80%;
  padding-top: 50px;
}
</style>

<template>
  <nut-navbar title="注册" left-show @click-back="router.back" />
  <div class="register-form">
    <nut-form ref="registerFormRef" :model-value="form" :rules="rules">
      <nut-form-item label="用户名:" required prop="username">
        <nut-input v-model="form.username" placeholder="请输入用户名" type="text" />
      </nut-form-item>
      <nut-form-item label="密码:" required prop="password">
        <nut-input v-model="form.password" placeholder="请填写密码" type="password" />
      </nut-form-item>
      <nut-form-item label="确认密码:" required prop="confirmPassword">
        <nut-input v-model="form.confirmPassword" placeholder="请确认密码" type="password" />
      </nut-form-item>
      <nut-form-item label="手机:" required prop="phone">
        <nut-input v-model="form.phone" placeholder="请填写联系手机" type="text" />
      </nut-form-item>
      <nut-form-item label="姓名:" required prop="name">
        <nut-input v-model="form.name" placeholder="请填写姓名" type="text" />
      </nut-form-item>
      <nut-form-item required prop="code">
        <nut-row>
          <nut-col :span="12">
            <nut-input v-model="form.code" placeholder="请输入验证码" type="text" />
          </nut-col>
          <nut-col :span="12">
            <img
              :src="store.captcha"
              style="width: 100%"
              @click="store.refreshCaptcha"
              v-if="store.captcha !== ''"
            />
          </nut-col>
        </nut-row>
      </nut-form-item>
      <nut-form-item>
        <nut-row justify="center" :gutter="10">
          <nut-col :span="12" style="text-align: center">
            <nut-button type="primary" @click="handleRegister">注册</nut-button>
          </nut-col>
          <nut-col :span="12" style="text-align: center">
            <nut-button type="default" @click="handleLogin">登录</nut-button>
          </nut-col>
        </nut-row>
      </nut-form-item>
    </nut-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import type { RegisterForm } from '@/config/form'
import { showToast } from '@nutui/nutui'

const store = useAuthStore()
const router = useRouter()
const registerFormRef = ref()
const form = ref<RegisterForm>({
  username: '',
  password: '',
  confirmPassword: '',
  phone: '',
  name: '',
  code: ''
})
const rules = {
  username: [
    { required: true, message: '请填写用户名' },
    {
      validator: (val) => {
        if (val.length >= 6 && val.length <= 20) {
          return Promise.resolve()
        }
        return Promise.reject('')
      },
      message: '用户名长度必须位6-20位'
    }
  ],
  password: [
    { required: true, message: '请填写密码' },
    {
      validator: (val) => {
        if (val.length >= 6 && val.length <= 20) {
          return Promise.resolve()
        }
        return Promise.reject('')
      },
      message: '密码长度必须为6-20位'
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码' },
    {
      validator: (val) => {
        if (val == form.value.password) {
          return Promise.resolve()
        } else {
          return Promise.reject('两次输入密码不一致')
        }
      }
    }
  ],
  phone: [{ required: true, message: '请填写联系手机', regex: /^1\d{10}$/ }],
  name: [{ required: true, message: '请填写姓名' }],
  code: [{ required: true, message: '请填写验证码' }]
}

onMounted(() => store.refreshCaptcha())

const handleLogin = () => {
  router.push({ name: 'login' })
}
const handleRegister = () => {
  registerFormRef.value.validate().then(async ({ valid, errors }) => {
    if (valid) {
      const result = await store.register(form.value)
      if (result) {
        showToast.success('注册成功', {
          closeOnClickOverlay: true,
          onClose: () => {
            router.push({ name: 'login' })
          }
        })
      } else {
        showToast.fail('注册失败')
      }
    }
  })
}
</script>
